<template>
  <div class="goodslistContainer">
    <router-link class="goodsBox" v-for="item in goodsList" :key='item.id' :to="'/home/goodsinfo/' + item.id"  tag='div'>
      <div class="goodsTitle">
        <img :src="item.img_url" alt />
        <p>{{item.title}}</p>
      </div>
     
    </router-link>

    
  </div>
</template>
<script>
export default {
  data(){
    return {
       id:this.$route.params.id,
        goodsList:[],
    }
  },
  created(){    
    this.getGoodsList(),
    this.goinfo()
  },
  methods:{
    getGoodsList(){
      this.$http.get('http://yapi.shangyuninfo.com/mock/121/api/goodslist?pageindex=1')
      .then(
        result=>{
          // console.log(result)
          this.goodsList = result.body.message
        }
      ).catch()
    },
    goinfo(id){
      console.log(this.id)
    }
  }
};
</script>
<style scoped>
.goodslistContainer {
  padding-top: 40px;
}
.goodsBox {
  float: left;
  margin: 2px;
  padding: 4px;
  width: 48%;
  border: 1px solid #c4c4c4;
}

.goodsBox img {
  width: 100%;
}
.goodsBox .goodsTitle {
  width: 100%;
}
.goodsBody {
  padding: 4px;
  background: #cccccc;
}
.goodsBody .goodsBodyTop {
  margin-bottom: 20px;
}
</style>